<template>
    <el-dialog id="personal-user-show"
               append-to-body
               top="5vh"
               :width="dialog.width"
               :visible="dialog.visible"
               :modal-append-to-body="false"
               :close-on-click-modal="false"
               @close="close">
        <div slot="title" class="text-center">
            <span class="font-s20 text-bold">
                <icon name="edit"></icon>
                编辑个人注册用户 {{ personalUser.uid }}
            </span>
        </div>
        <!-- 操作按钮 -->
        <div class="text-center">
            <el-button-group>
                <el-button size="medium" @click="handleReload">
                    <icon name="refresh"></icon>
                    重新载入
                </el-button>
                <el-button size="medium"
                           @click="dialogPersonalUserSend(personalUser.uid)">
                    <icon name="resume-send"></icon>
                    用户投递
                </el-button>
                <el-button size="medium"
                           @click="dialogPersonalUserReceiveInterview(personalUser.uid)">
                    <icon name="interview"></icon>
                    用户收到面试
                </el-button>
                <el-button size="medium"
                           @click="dialogUserLoginRecord(personalUser.uid)">
                    <icon name="record"></icon>
                    登录记录
                </el-button>
            </el-button-group>
        </div>

        <!-- 会员 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span class="detail-project__mark"></span>
                        <strong class="detail-project__label">会员</strong>
                    </div>
                </div>
            </div>
            <el-descriptions size="medium"
                             label-class-name="detail-label"
                             border
                             :column="2">
                <!-- 用户名 -->
                <el-descriptions-item label="用户名：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-input v-model="model.username"
                                      size="medium"
                                      placeholder="用户名"
                                      minlength="5"
                                      maxlength="15"></el-input>
                        </div>
                        <div class="ml-10">
                            <el-button size="medium"
                                       :type="!isUsername(model.username) || model.username === personalUser.username ? 'info' : 'success'"
                                       :disabled="!isUsername(model.username) || model.username === personalUser.username"
                                       @click="handleModifyUsername">
                                <icon name="modify"></icon>
                                修改
                            </el-button>
                        </div>
                    </div>
                </el-descriptions-item>
                <!-- 密码 -->
                <el-descriptions-item label="密码：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-input v-model="model.password"
                                      size="medium"
                                      placeholder="密码"
                                      minlength="6"
                                      maxlength="16"></el-input>
                        </div>
                        <div class="ml-10">
                            <el-button v-if="isPassword(model.password)"
                                       type="warning"
                                       size="medium"
                                       @click="handleModifyPassword(model.password)">
                                <icon name="lock1"></icon>
                                修改
                            </el-button>
                            <el-tooltip v-else
                                        :content="`初始密码：${initPassword}`" placement="top">
                                <el-popconfirm icon="el-icon-info"
                                               :title="`初始化密码【${initPassword}】确定！`"
                                               @confirm="handleModifyPassword(initPassword)">
                                    <el-button slot="reference"
                                               type="success"
                                               size="medium">
                                        <icon name="initial"></icon>
                                        初始
                                    </el-button>
                                </el-popconfirm>
                            </el-tooltip>

                        </div>
                    </div>
                </el-descriptions-item>
                <!-- 手机号 -->
                <el-descriptions-item label="手机号：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-input v-model="model.mobile"
                                      size="medium"
                                      placeholder="手机号码"
                                      :disabled="personalUser.bind.mobile"></el-input>
                        </div>
                        <div class="ml-10">
                            <el-button v-if="!personalUser.bind.mobile"
                                       size="medium"
                                       type="success"
                                       :disabled="!isMobile(model.mobile)"
                                       @click="handleBindMobile({mobile: model.mobile})">
                                <icon name="binding"></icon>
                                绑定
                            </el-button>
                            <!-- 解绑 -->
                            <el-popconfirm v-else
                                           title="确定解除 “手机号码绑定” ？"
                                           icon="el-icon-warning"
                                           icon-color="red"
                                           @confirm="handleUnBind({type: 'mobile', mobile_id: 0, mobile: model.mobile})">
                                <el-button slot="reference"
                                           size="medium"
                                           :type="unBindButtonSkin(personalUser.bind.mobile)"
                                           :disabled="!personalUser.bind.mobile">
                                    <icon name="unbind"></icon>
                                    解绑
                                </el-button>
                            </el-popconfirm>
                        </div>
                    </div>
                </el-descriptions-item>
                <!-- 邮箱 -->
                <el-descriptions-item label="邮箱：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-input v-model="model.email"
                                      size="medium"
                                      placeholder="电子邮件"
                                      :disabled="personalUser.bind.email"></el-input>
                        </div>
                        <div class="ml-10">
                            <!-- 绑定 -->
                            <el-button v-if="!personalUser.bind.email"
                                       size="medium"
                                       type="success"
                                       :disabled="!isEmail(model.email)"
                                       @click="handleBindEmail({email_id: 1, email: model.email})">
                                <icon name="binding"></icon>
                                绑定
                            </el-button>
                            <!-- 解绑 -->
                            <el-popconfirm v-else
                                           title="确定解除 “邮箱绑定” ？"
                                           icon="el-icon-warning"
                                           icon-color="red"
                                           @confirm="handleUnBind({type: 'email', email_id: 0, email: model.email})">
                                <el-button slot="reference"
                                           size="medium"
                                           :type="unBindButtonSkin(personalUser.bind.email)"
                                           :disabled="!personalUser.bind.email">
                                    <icon name="unbind"></icon>
                                    解绑
                                </el-button>
                            </el-popconfirm>
                        </div>
                    </div>
                </el-descriptions-item>
                <!-- QQ -->
                <el-descriptions-item label="QQ 绑定：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-input :value="personalUser.qqopenid || '无'" size="medium" disabled
                                      placeholder="QQ 绑定"></el-input>
                        </div>
                        <div class="ml-10">
                            <el-popconfirm title="确定解除 “QQ 绑定” ？"
                                           icon="el-icon-warning"
                                           icon-color="red"
                                           @confirm="handleLogoutClient({type: 'qqopenid'})">
                                <el-button slot="reference"
                                           size="medium"
                                           :type="unBindButtonSkin(personalUser.bind.qq)"
                                           :disabled="!personalUser.bind.qq">
                                    <icon name="unbind"></icon>
                                    解绑
                                </el-button>
                            </el-popconfirm>
                        </div>
                    </div>
                </el-descriptions-item>
                <!-- 微信 -->
                <el-descriptions-item label="微信绑定：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-input :value="personalUser.wechatopenid || '无'" size="medium" disabled
                                      placeholder="微信绑定"></el-input>
                        </div>
                        <div class="ml-10">
                            <el-popconfirm title="确定解除 “微信绑定” ？"
                                           icon="el-icon-warning"
                                           icon-color="red"
                                           @confirm="handleLogoutClient({type: 'wechatopenid'})">
                                <el-button slot="reference"
                                           size="medium"
                                           :type="unBindButtonSkin(personalUser.bind.wechat)"
                                           :disabled="!personalUser.bind.wechat">
                                    <icon name="unbind"></icon>
                                    解绑
                                </el-button>
                            </el-popconfirm>
                        </div>
                    </div>
                </el-descriptions-item>
                <!-- 微信公众平台 -->
                <el-descriptions-item label="微信公众平台：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-input :value="personalUser.wechatmpopenid || '无'" size="medium" disabled
                                      placeholder="微信绑定"></el-input>
                        </div>
                        <div class="ml-10">
                            <el-popconfirm title="确定解除 “微信公众平台” ？"
                                           icon="el-icon-warning"
                                           icon-color="red"
                                           @confirm="handleLogoutClient({type: 'wechatmpopenid'})">
                                <el-button slot="reference"
                                           size="medium"
                                           :type="unBindButtonSkin(personalUser.bind.wechat_mp)"
                                           :disabled="!personalUser.bind.wechat_mp">
                                    <icon name="unbind"></icon>
                                    解绑
                                </el-button>
                            </el-popconfirm>
                        </div>
                    </div>
                </el-descriptions-item>
                <!-- 微信 union id -->
                <el-descriptions-item label="微信 union id：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-input :value="personalUser.wechatunionid || '无'"
                                      size="medium"
                                      disabled></el-input>
                        </div>
                        <div class="ml-10">
                            <el-popconfirm title="确定解除 “微信 union id” ？"
                                           icon="el-icon-warning"
                                           icon-color="red"
                                           @confirm="handleLogoutClient({type: 'wechatunionid'})">
                                <el-button slot="reference"
                                           size="medium"
                                           :type="unBindButtonSkin(personalUser.bind.wechat_union_id)"
                                           :disabled="!personalUser.bind.wechat_union_id">
                                    <icon name="unbind"></icon>
                                    解绑
                                </el-button>
                            </el-popconfirm>
                        </div>
                    </div>
                </el-descriptions-item>
                <!-- 微信小程序 -->
                <el-descriptions-item label="微信小程序：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-input :value="personalUser.api_token || '无'"
                                      size="medium"
                                      disabled></el-input>
                        </div>
                        <div class="ml-10">
                            <el-popconfirm title="确定注销 “微信小程序” 端？"
                                           icon="el-icon-warning"
                                           icon-color="red"
                                           @confirm="handleLogoutClient({type: 'api_token'})">
                                <el-button slot="reference"
                                           size="medium"
                                           :type="unBindButtonSkin(personalUser.bind.wechat_mini_program)"
                                           :disabled="!personalUser.bind.wechat_mini_program">
                                    <icon name="logout2"></icon>
                                    注销
                                </el-button>
                            </el-popconfirm>
                        </div>
                    </div>
                </el-descriptions-item>
                <!-- APP -->
                <el-descriptions-item label="APP：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-input :value="personalUser.app_token || '无'" size="medium" placeholder="无"
                                      disabled></el-input>
                        </div>
                        <div class="ml-10">
                            <el-popconfirm title="确定注销 “求职版APP” 端？"
                                           icon="el-icon-warning"
                                           icon-color="red"
                                           @confirm="handleLogoutClient({type: 'app_token'})">
                                <el-button slot="reference"
                                           size="medium"
                                           :type="unBindButtonSkin(personalUser.bind.app)"
                                           :disabled="!personalUser.bind.app">
                                    <icon name="logout2"></icon>
                                    注销
                                </el-button>
                            </el-popconfirm>
                        </div>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
        </section>

        <!-- 简历 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span class="detail-project__mark"></span>
                        <strong class="detail-project__label">简历</strong>
                    </div>
                </div>
                <div class="el-divider__text is-right">
                    <strong class="font-s20">{{ personalUser.resume_count }}</strong>
                    <span class="text-info">份</span>
                </div>
            </div>
            <template v-if="personalUser.resumes.length > 0">
                <div class="r-flex mb-30"
                     v-for="(resumes, i) in personalUser.resumes"
                     :key="i">
                    <div class="r-flex__item"></div>
                    <div style="width: 550px;">
                        <el-row :gutter="20">
                            <el-col class="text-center"
                                    v-for="resume in resumes"
                                    :key="resume.id"
                                    :span="8">
                                <el-badge value="默认" :hidden="resume.default !== 1">
                                    <el-card :body-style="{ padding: '0px' }">
                                        <el-image class="image-avatar "
                                                  :class="{'image-avatar--audit': resume.audit_status.value === 0}"
                                                  :style="{width: '150px',
                                                  height: '150px', fontSize: '60px', lineHeight: '150px', borderRadius: '0'}"
                                                  fit="cover"
                                                  :src="resume.avatar_url ? resume.avatar_url : ''">
                                            <div slot="error">
                                                <icon name="pic"></icon>
                                            </div>
                                        </el-image>
                                        <div class="p10 text-center">
                                            <el-link target="_blank"
                                                     :underline="false"
                                                     @click="dialogResumeShow(resume.id)">
                                                <icon name="see-detail"></icon>
                                                {{ resume.name }} [{{ resume.id }}]
                                            </el-link>
                                        </div>
                                    </el-card>
                                </el-badge>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="r-flex__item"></div>
                </div>
            </template>
            <template v-else>
                <div class="text-info text-center">暂无数据</div>
            </template>
        </section>

        <!-- 其他 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span class="detail-project__mark"></span>
                        <strong class="detail-project__label">其他</strong>
                    </div>
                </div>
            </div>
            <el-descriptions size="medium"
                             label-class-name="detail-label"
                             border
                             :column="2">
                <!-- 注册 IP -->
                <el-descriptions-item label="注册 IP：">
                    {{ personalUser.regip || '无' }}
                </el-descriptions-item>
                <!-- 注册时间 -->
                <el-descriptions-item label="注册时间：">
                    {{ personalUser.created_at || '无' }}
                </el-descriptions-item>
                <!-- 登录 IP -->
                <el-descriptions-item label="登录 IP：">
                    {{ personalUser.last_login_ip || '无' }}
                </el-descriptions-item>
                <!-- 登录时间 -->
                <el-descriptions-item label="登录时间：">
                    {{ personalUser.last_login_time || '无' }}
                </el-descriptions-item>
                <!-- 更新时间 -->
                <el-descriptions-item label="更新时间：">
                    {{ personalUser.updated_at || '无' }}
                </el-descriptions-item>
                <!-- 锁定 -->
                <el-descriptions-item label="锁定：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-tooltip :content="`操作时间：${personalUser.lock_time}`" placement="top">
                                <el-tag :type="personalUser.is_lock === 0 ? 'success' : 'danger'">
                                    {{ personalUser.is_lock === 0 ? '账户正常' : '账户已锁定' }}
                                </el-tag>
                            </el-tooltip>
                        </div>
                        <div class="ml-10">
                            <el-button :type="personalUser.is_lock === 0 ? 'danger' : 'success'"
                                       size="medium"
                                       @click="handleLock">
                                <icon :name="personalUser.is_lock === 0 ? 'lock' : 'unlock'"></icon>
                                {{ personalUser.is_lock === 0 ? '锁定' : '解锁' }}
                            </el-button>
                        </div>
                    </div>
                </el-descriptions-item>
                <!-- 注册源 -->
                <el-descriptions-item label="注册来源：">
                    <el-tag type="warning" :disable-transitions="true">{{ personalUser.register_source_label || '未知' }}</el-tag>
                </el-descriptions-item>
            </el-descriptions>
        </section>

        <!-- 保存 -->
        <div class="mt-20 text-right">
            <el-button type="text" size="medium" @click="close">取消</el-button>
            <el-button type="primary"
                       size="medium"
                       native-type="submit"
                       :loading="saveLoading"
                       @click="submitForm">
                <icon name="save"></icon>
                保存
            </el-button>
        </div>

        <!-- dialog -->
        <component :is="dialogBox.component" :dialog="dialogBox" @close="closeDialogBox"></component>
    </el-dialog>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { Prop, Emit } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

import FunctionMixin from '@/mixins/function'
import PersonalMixin from '@/mixins/personal'

import { toJson, loading, errorMessage, successMessage } from '@/utils'

const module = namespace('cms/personalUser')

import ResumeShow from '@/views/cms/personal/resume/Show.vue'
import PersonalUserSend from '@/views/cms/personal/resume-send/PersonalUserSend.vue'
import PersonalUserLoginRecord from '@/views/cms/personal/personal-user-record/UserLoginRecord.vue'
import PersonalUserReceiveInterview from '@/views/cms/company/interview/PersonalUserReceiveInterview.vue'

@Component({
  components: {
    ResumeShow,
    PersonalUserSend,
    PersonalUserLoginRecord,
    PersonalUserReceiveInterview
  }
})
export default class Show extends mixins(FunctionMixin, PersonalMixin) {
  @Prop({type: Object, default: {width: '1000px', visible: false}}) dialog!: any

  // Vuex
  @module.State personalUser!: any
  @module.Action show!: (payLoad: any) => Promise<any>
  @module.Action update!: (payLoad: any) => Promise<any>
  @module.Action modifyUsername!: (payLoad: any) => Promise<any>
  @module.Action modifyPassword!: (payLoad: any) => Promise<any>
  @module.Action bindMobile!: (payLoad: any) => Promise<any>
  @module.Action bindEmail!: (payLoad: any) => Promise<any>
  @module.Action unBind!: (payLoad: any) => Promise<any>
  @module.Action logoutClient!: (payLoad: any) => Promise<any>
  @module.Action lock!: (payLoad: any) => Promise<any>

  // 初始化密码
  private initPassword: string = '123456'

  // form 模型
  public model: any = {
    username: '',
    password: '',
    mobile: '',
    email: ''
  }

  private saveLoading: boolean = false

  /*----- 钩子 -----*/
  created() {
    this.model = toJson(this.personalUser)
  }

  /**
   * 重新载入
   *
   * @return {void}
   */
  private handleReload(): void {
    const _loading = loading({target: '#personal-user-show > .el-dialog', background: 'rgba(0, 0, 0, .7)'})
    this.show({id: this.personalUser.uid}).then((res) => {
      _loading.close()
      res.status === 200 ? successMessage('重新载入成功！') : errorMessage(res.message)
    }).catch((err) => {
      _loading.close()
    })
  }

  /**
   * 提交表单
   */
  private submitForm(): void | boolean {
    this.saveLoading = true
    this.update({uid: this.personalUser.uid, index: this.dialog.index, params: this.model}).then((res: any) => {
      this.saveLoading = false
      if (res.status !== 200) {
        errorMessage(res.message)
        return false
      }

      this.model = toJson(res.data.show) // 重新赋给 model
      successMessage(res.message)
      this.close()
    }).catch((err: any) => {
      this.saveLoading = false
    })
  }

  /**
   * 绑定按钮 skin
   *
   * @param {number} status 状态
   * @private
   */
  protected unBindButtonSkin(status: number): string {
    return status ? 'danger' : 'info'
  }

  /**
   * 修改用户名
   *
   * @return {void}
   */
  private handleModifyUsername(): void {
    const _loading = loading({target: '#personal-user-show > .el-dialog', background: 'rgba(0, 0, 0, .7)'})
    const params = {
      username: this.model.username
    }
    this.modifyUsername({id: this.personalUser.uid, index: this.dialog.index, params}).then((res) => {
      res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
      _loading.close()
    }).catch((err) => {
      _loading.close()
    })
  }

  /**
   * 处理修改密码
   *
   * @param {string} password 密码
   * @return {void}
   */
  private handleModifyPassword(password: string): void {
    const _loading = loading({target: '#personal-user-show > .el-dialog', background: 'rgba(0, 0, 0, .7)'})
    const params = {
      password
    }

    this.modifyPassword({id: this.personalUser.uid, index: this.dialog.index, params}).then((res) => {
      res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
      _loading.close()
    }).catch((err) => {
      _loading.close()
    })
  }

  /**
   * 处理绑定手机号码
   *
   * @param {Object} params 参数
   * @return {void}
   */
  private handleBindMobile(params: any): void {
    const _loading = loading({target: '#personal-user-show > .el-dialog', background: 'rgba(0, 0, 0, .7)'})
    this.bindMobile({id: this.personalUser.uid, index: this.dialog.index, params}).then((res) => {
      res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
      _loading.close()
    }).catch((err) => {
      _loading.close()
    })
  }

  /**
   * 处理绑定邮箱
   *
   * @param {Object} params 参数
   * @return {void}
   */
  private handleBindEmail(params: any): void {
    const _loading = loading({target: '#edit-personal-user > .el-dialog'})
    this.bindEmail({id: this.personalUser.uid, index: this.dialog.index, params}).then((res) => {
      res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
      _loading.close()
    }).catch((err) => {
      _loading.close()
    })
  }

  /**
   * 处理解除绑定
   *
   * @param {Object} params 参数
   * @return {void}
   */
  private handleUnBind(params: any): void {
    const _loading = loading({target: '#personal-user-show > .el-dialog', background: 'rgba(0, 0, 0, .7)'})
    this.unBind({id: this.personalUser.uid, index: this.dialog.index, params}).then((res) => {
      res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
      _loading.close()
    }).catch((err) => {
      _loading.close()
    })
  }

  /**
   * 处理退出客户端
   *
   * @param {Object} params 参数
   * @return {void}
   */
  private handleLogoutClient(params: any): void {
    const _loading = loading({target: '#personal-user-show > .el-dialog', background: 'rgba(0, 0, 0, .7)'})
    this.logoutClient({id: this.personalUser.uid, index: this.dialog.index, params}).then((res) => {
      res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
      _loading.close()
    }).catch((err) => {
      _loading.close()
    })
  }

  /**
   * 处理锁定
   *
   * @return {void}
   */
  private handleLock(): void {
    const _loading = loading({target: '#personal-user-show > .el-dialog', background: 'rgba(0, 0, 0, .7)'})
    this.lock({
      id: this.personalUser.uid,
      index: this.dialog.index,
      params: {is_lock: this.personalUser.is_lock}
    }).then((res) => {
      res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
      _loading.close()
    }).catch((err) => {
      _loading.close()
    })
  }

  @Emit()
  close(): void {
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/view/edit';
@import '~@/styles/view/image';
</style>
